import React, { useState } from 'react';
import { LoginPage } from './components/LoginPage';
import { GuardDashboard } from './components/GuardDashboard';
import { AdminDashboard } from './components/AdminDashboard';
import { SuperAdminDashboard } from './components/SuperAdminDashboard';
import { ThemeProvider } from './contexts/ThemeContext';

export interface User {
  id: string;
  name: string;
  role: 'guard' | 'admin' | 'superadmin';
  phone?: string;
  district?: string;
}

function App() {
  const [user, setUser] = useState<User | null>(null);

  const handleLogin = (userData: User) => {
    setUser(userData);
  };

  const handleLogout = () => {
    setUser(null);
  };

  const renderDashboard = () => {
    if (!user) return null;
    
    switch (user.role) {
      case 'guard':
        return <GuardDashboard user={user} onLogout={handleLogout} />;
      case 'admin':
        return <AdminDashboard user={user} onLogout={handleLogout} />;
      case 'superadmin':
        return <SuperAdminDashboard user={user} onLogout={handleLogout} />;
      default:
        return null;
    }
  };

  return (
    <ThemeProvider>
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
        {user ? renderDashboard() : <LoginPage onLogin={handleLogin} />}
      </div>
    </ThemeProvider>
  );
}

export default App;